<template>
  <div class="list_box">
    <ul class="list">
      <li>文章</li>
      <!-- <li @click="tomoveHandel" ref="answer">回复</li>
      <li @click="tomoveHandel" ref="talk">评论</li> -->
      <li ref="zhezhao"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeIntro'
  // methods: {
  //   tomoveHandel () { // 导航移动效果
  //     this.$refs.zhezhao.style.left = event.target.offsetLeft + 'px'
  //     if (event.target.innerText === '文章') {
  //       this.$refs.answer.style.color = 'rgb(0,0,0)'
  //       this.$refs.talk.style.color = 'rgb(0,0,0)'
  //       this.$refs.article.style.color = 'rgb(255,255,255)'
  //       this.$router.push('/Myhome/article')
  //     } else if (event.target.innerText === '回复') {
  //       this.$refs.talk.style.color = 'rgb(0,0,0)'
  //       this.$refs.article.style.color = 'rgb(0,0,0)'
  //       this.$refs.answer.style.color = 'rgb(255,255,255)'
  //     } else if (event.target.innerText === '评论') {
  //       this.$refs.answer.style.color = 'rgb(0,0,0)'
  //       this.$refs.talk.style.color = 'rgb(255,255,255)'
  //       this.$refs.article.style.color = 'rgb(0,0,0)'
  //     }
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  .list_box{
    position: absolute
    top: 0
    left: 300px
    width: 900px
    height: 40px
    content: " "
    display: table
    clear: both
    background-color: rgb(255,255,255)
    .list{
      padding: 0
      margin: 0
      list-style: none
      width: 100%
      height: 100%
      display: flex
      flex-direction: row
      border: .5px solid rgb(230,230,230)
      box-shadow: 0 0 1px rgb(230,230,230)
      li{
        float: left
        position: relative
        z-index: 1
        cursor: default
        text-align: center
        line-height: 40px
        font-size: .4rem
        width: 100px
        height: 40px
        transition: all .5s
      }
      li:first-child{
        color: rgb(255,255,255)
      }
      li:last-child{
        position: absolute
        z-index: 0
        top: 0
        transition: all .5s
        background-color: rgb(15,153,255)
      }
    }
  }
</style>
